<template>
  <d2-container>
    <div class="home-dashboard" v-loading="loading">
      <!-- 顶部功能按钮区域 - 6个按钮同一行 -->
      <div class="top-buttons">
        <div 
          class="button-item" 
          v-for="(button, index) in topButtons" 
          :key="index"
          @click="handleButtonClick(button)"
        >
          <div class="button-icon">
            <i :class="button.icon" :style="{ color: button.color }"></i>
          </div>
          <div class="button-title">{{ button.title }}</div>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 左侧区域 -->
        <div class="left-section">
          <!-- 近30天费用占比 -->
          <div class="chart-card">
            <div class="card-header">
              <i class="el-icon-refresh" style="color: #409EFF; margin-right: 8px;"></i>
              近30天费用占比
            </div>
            <div class="chart-content">
              <div id="costChart" class="chart"></div>
              <div class="chart-legend">
                <div class="legend-item" v-for="(item, index) in costData" :key="index">
                  <div class="legend-dot" :style="{ backgroundColor: item.color }"></div>
                  <span class="legend-name">{{ item.name }}</span>
                  <span class="legend-value">{{ item.value }}</span>
                  <span class="legend-percent">{{ item.percent }}%</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 缴费类型图表 -->
          <div class="chart-card">
            <div class="card-header">
              <i class="el-icon-pie-chart" style="color: #409EFF; margin-right: 8px;"></i>
              缴费类型
            </div>
            <div class="chart-content">
              <div id="paymentChart" class="chart"></div>
              <div class="chart-stats">
                <div class="stat-item" v-for="(item, index) in paymentData" :key="index">
                  <div class="stat-color" :style="{ backgroundColor: item.color }"></div>
                  <div class="stat-info">
                    <div class="stat-name">{{ item.name }}</div>
                    <div class="stat-value">{{ item.value }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧区域 -->
        <div class="right-section">
          <!-- 采集网关 -->
          <div class="gateway-card">
            <div class="card-header">
              <i class="el-icon-s-grid" style="color: #409EFF; margin-right: 8px;"></i>
              采集网关
            </div>
            <div class="gateway-content">
              <div class="gateway-item" v-for="(gateway, index) in gatewayData" :key="index">
                <div class="gateway-icon">
                  <i :class="gateway.icon" :style="{ color: gateway.color }"></i>
                </div>
                <div class="gateway-info">
                  <div class="gateway-name">{{ gateway.name }}</div>
                  <div class="gateway-stats">
                    <span class="online">在线数量：{{ gateway.online }}</span>
                    <span class="offline">离线数量：{{ gateway.offline }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 列表 -->
          <div class="table-card">
            <div class="card-header">
              <i class="el-icon-tickets" style="color: #409EFF; margin-right: 8px;"></i>
              列表
              <span class="more-btn" @click="handleMoreClick">更多 <i class="el-icon-arrow-right"></i></span>
            </div>
            <div class="table-content">
              <el-table :data="tableData" style="width: 100%" size="small">
                <el-table-column prop="id" label="序号" width="60" align="center"></el-table-column>
                <el-table-column prop="name" label="用户名称" width="100" align="center"></el-table-column>
                <el-table-column prop="balance" label="余额" width="80" align="center"></el-table-column>
                <el-table-column prop="prepaid" label="预缴金额" width="100" align="center"></el-table-column>
                <el-table-column prop="gift" label="赠送金额" width="100" align="center"></el-table-column>
                <el-table-column prop="time" label="缴费时间" width="140" align="center"></el-table-column>
                <el-table-column prop="status" label="是否欠费" width="80" align="center">
                  <template slot-scope="scope">
                    <el-tag :type="scope.row.status === '否' ? 'success' : 'danger'" size="mini">
                      {{ scope.row.status }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </d2-container>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'HomeDashboard',
  data() {
    return {
      loading: false,
      
      // 顶部按钮数据
      topButtons: [
        { title: '充值缴费', icon: 'el-icon-money', color: '#409EFF', route: '/finance/recharge' },
        { title: '一键开户', icon: 'el-icon-user', color: '#67C23A', route: '/tenant/account' },
        { title: '账单查询', icon: 'el-icon-document', color: '#E6A23C', route: '/finance/bill' },
        { title: '电表管理', icon: 'el-icon-cpu', color: '#F56C6C', route: '/device/meter' },
        { title: '水表管理', icon: 'el-icon-help', color: '#909399', route: '/device/water' },
        { title: '保电管理', icon: 'el-icon-setting', color: '#9C27B0', route: '/power/manage' }
      ],
      
      // 费用数据
      costData: [
        { name: '聚合', value: 0, percent: 0, color: '#5470c6' },
        { name: '微信', value: 0, percent: 0, color: '#91cc75' },
        { name: '支付宝', value: 0, percent: 0, color: '#fac858' },
        { name: '现金', value: 16112.9, percent: 100, color: '#ee6666' },
        { name: '银联', value: 0, percent: 0, color: '#73c0de' }
      ],
      
      // 缴费类型数据
      paymentData: [
        { name: '在线', value: 19327, color: '#409EFF' },
        { name: '线下', value: 19327, color: '#67C23A' }
      ],
      
      // 网关数据
      gatewayData: [
        { name: '4G模块', icon: 'el-icon-connection', color: '#409EFF', online: 0, offline: 1 },
        { name: '电表数据', icon: 'el-icon-cpu', color: '#67C23A', online: 0, offline: 1 },
        { name: '水表数据', icon: 'el-icon-help', color: '#E6A23C', online: 0, offline: 1 }
      ],
      
      // 表格数据
      tableData: [
        {
          id: 1,
          name: '李子明',
          balance: 36,
          prepaid: 30,
          gift: 20,
          time: '2025-05-02 15:30:00',
          status: '否'
        }
      ],
      
      // 图表实例
      costChart: null,
      paymentChart: null
    }
  },
  
  mounted() {
    this.initCharts()
    window.addEventListener('resize', this.handleResize)
  },
  
  beforeDestroy() {
    if (this.costChart) {
      this.costChart.dispose()
    }
    if (this.paymentChart) {
      this.paymentChart.dispose()
    }
    window.removeEventListener('resize', this.handleResize)
  },
  
  methods: {
    // 初始化图表
    initCharts() {
      this.$nextTick(() => {
        this.initCostChart()
        this.initPaymentChart()
      })
    },
    
    // 初始化费用图表
    initCostChart() {
      const chartDom = document.getElementById('costChart')
      if (!chartDom) return
      
      this.costChart = echarts.init(chartDom)
      
      const option = {
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '50%'],
          data: this.costData.map(item => ({
            value: item.value,
            name: item.name,
            itemStyle: { color: item.color }
          })),
          label: { show: false },
          labelLine: { show: false }
        }],
        graphic: {
          type: 'text',
          left: 'center',
          top: 'middle',
          style: {
            text: '16112.9\n总金额',
            textAlign: 'center',
            fill: '#333',
            fontSize: 14,
            fontWeight: 'bold'
          }
        }
      }
      
      this.costChart.setOption(option)
    },
    
    // 初始化缴费类型图表
    initPaymentChart() {
      const chartDom = document.getElementById('paymentChart')
      if (!chartDom) return
      
      this.paymentChart = echarts.init(chartDom)
      
      const option = {
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '50%'],
          data: this.paymentData.map(item => ({
            value: item.value,
            name: item.name,
            itemStyle: { color: item.color }
          })),
          label: { show: false },
          labelLine: { show: false }
        }],
        graphic: {
          type: 'text',
          left: 'center',
          top: 'middle',
          style: {
            text: '38654\n总计',
            textAlign: 'center',
            fill: '#333',
            fontSize: 14,
            fontWeight: 'bold'
          }
        }
      }
      
      this.paymentChart.setOption(option)
    },
    
    // 处理按钮点击
    handleButtonClick(button) {
      if (button.route) {
        this.$router.push(button.route)
      } else {
        this.$message.info(`点击了${button.title}`)
      }
    },
    
    // 处理更多按钮点击
    handleMoreClick() {
      this.$router.push('/tenant/list')
    },
    
    // 处理窗口大小变化
    handleResize() {
      if (this.costChart) {
        this.costChart.resize()
      }
      if (this.paymentChart) {
        this.paymentChart.resize()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home-dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

// 顶部按钮区域 - 6个按钮同一行
.top-buttons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
  margin-bottom: 20px;
  
  .button-item {
    background: white;
    border-radius: 8px;
    padding: 20px 15px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }
    
    .button-icon {
      margin-bottom: 10px;
      
      i {
        font-size: 24px;
      }
    }
    
    .button-title {
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
  }
}

// 主要内容区域 - 左右布局
.main-content {
  display: flex;
  gap: 20px;
  height: calc(100vh - 200px);
  
  .left-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    .chart-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      flex: 1;
      
      .card-header {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
      }
      
      .chart-content {
        display: flex;
        align-items: center;
        gap: 20px;
        height: calc(100% - 60px);
        
        .chart {
          width: 200px;
          height: 200px;
          flex-shrink: 0;
        }
        
        .chart-legend {
          flex: 1;
          
          .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-size: 14px;
            
            .legend-dot {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              margin-right: 10px;
            }
            
            .legend-name {
              width: 60px;
              color: #666;
            }
            
            .legend-value {
              width: 80px;
              color: #333;
              font-weight: 500;
              margin-right: 10px;
            }
            
            .legend-percent {
              color: #999;
            }
          }
        }
        
        .chart-stats {
          flex: 1;
          
          .stat-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            
            .stat-color {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              margin-right: 10px;
            }
            
            .stat-info {
              .stat-name {
                font-size: 14px;
                color: #666;
                margin-bottom: 5px;
              }
              
              .stat-value {
                font-size: 18px;
                font-weight: bold;
                color: #333;
              }
            }
          }
        }
      }
    }
  }
  
  .right-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    .gateway-card, .table-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      
      .card-header {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .more-btn {
          font-size: 14px;
          color: #409EFF;
          cursor: pointer;
          
          &:hover {
            color: #66b1ff;
          }
        }
      }
    }
    
    .gateway-card {
      flex: 0 0 auto;
      
      .gateway-content {
        .gateway-item {
          display: flex;
          align-items: center;
          padding: 15px 0;
          border-bottom: 1px solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .gateway-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: #f0f8ff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            
            i {
              font-size: 18px;
            }
          }
          
          .gateway-info {
            flex: 1;
            
            .gateway-name {
              font-size: 14px;
              font-weight: 500;
              color: #333;
              margin-bottom: 5px;
            }
            
            .gateway-stats {
              font-size: 12px;
              color: #666;
              
              .online {
                margin-right: 15px;
                color: #67c23a;
              }
              
              .offline {
                color: #f56c6c;
              }
            }
          }
        }
      }
    }
    
    .table-card {
      flex: 1;
      
      .table-content {
        height: calc(100% - 60px);
        overflow: auto;
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .top-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .main-content {
    flex-direction: column;
    height: auto;
  }
}

@media (max-width: 768px) {
  .home-dashboard {
    padding: 10px;
  }
  
  .top-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    
    .button-item {
      padding: 15px 10px;
      
      .button-icon i {
        font-size: 20px;
      }
      
      .button-title {
        font-size: 12px;
      }
    }
  }
  
  .chart-content {
    flex-direction: column !important;
    
    .chart {
      width: 100% !important;
      height: 200px !important;
    }
  }
}
</style>

